<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>1回顾Object.defineproperty方法</title>
        <script type="text/javascript" src="../js/vue.js"></script>
        <!-- shortcut icon”这样做的结果是所有浏览器都可以理解此代码。只有当希望为新浏览器提供另一种备用图像,才有必要添加第二行使用icon -->
        <link rel ="shortcut icon" type="image/x-icon" href="../static/vue.jpg">
    </head>

    <body>
        <script>
            let number = 18
            let person = {
                name:'张三',
                sex:'男',
            }

            Object.defineProperty(person , 'age' , {
                // value:18,
                // enumerable:true, //控制属性是否可以枚举，默认值是false
                // writable:true, //控制属性是否可以贝修改，默认值是false
                // configurable:true //控制属性是否可以被删除，默认值是false

                // 当有人读取person的age属性时，get函数，也叫getter就会被调用，且返回值就是age的值
                get:function(){ // 可以简写为get(){}
                    return number
                }
                ,
                // 当有人读取person的age属性时，set函数，也叫setter就会被调用，且会收到修改的具体值
                set(value){
                    console.log('有人修改了age属性，且值为' , value)
                    number = value
                }
            })

            console.log(Object.keys(person))

            // console.log(person)

        </script>
    </body> 

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
    </script>
</html>